
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>海里捞漂流瓶-登录账户</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{{ url_for('static',filename='index/css/register.css') }}">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="form-structor">
	<div class="signup">
        {% if error %}
        <h3 class="form-title">
            <p style="color: red;">{{ error }}</p>
        </h3>
        {% endif %}
		<h2 class="form-title" id="signup">登录账户</h2>
		<div class="form-holder">
			<input type="text" class="input" placeholder="账户名称" name="username"/>
			<input type="password" class="input" placeholder="账户密码" name="password"/>
		</div>
		<button type="submit" class="submit-btn" id="loginbtn">登录</button>
	</div>

    <div class="login slide-up">
		<div class="center">
			<h2 class="form-title" id="login"><span>或</span>注册</h2>
			<div class="form-holder">
				<input type="email" class="input" placeholder="邮箱" />
				<input type="password" class="input" placeholder="密码" />
			</div>
			<button class="submit-btn">登录</button>
		</div>
	</div>
</div>
{#单页登录/注册/register#}
<!-- partial -->
  <script  src="{{ url_for('static',filename='index/js/register.js') }}"></script>
  <script>
      loginBtn.addEventListener('click', (e) => {
        location.href = '/register';
        return false;
        // 下面是单页注册
        let parent = e.target.parentNode;
        Array.from(e.target.parentNode.classList).find((element) => {
            if(element !== "slide-up") {
                parent.classList.add('slide-up')
            }else{
                loginBtn.parentNode.parentNode.classList.add('slide-up')
                parent.classList.remove('slide-up')
            }
        });
    });

       // 获取登录按钮元素
    const loginbtn = document.getElementById('loginbtn');
    // 添加点击事件监听器
    loginbtn.addEventListener('click', (e) => {
      e.preventDefault(); // 阻止表单默认提交行为

      // 获取用户名和密码输入框的值
      const username = document.querySelector('input[type="text"]').value;
      const password = document.querySelector('input[type="password"]').value;
      if(password.length<1 || username.length<1){
          alert('请将登录信息填写完整')
          return false
      }
      // 发送登录请求
      fetch('/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, password })
      })
      .then(response => response.json())
      .then(data => {
        if (data.error) {
          // 弹出错误信息
          alert(data.error);
        } else {
          // 登录成功，执行其他操作
            {#alert('登录成功，欢迎你');#}
            location.href = '/'
        }
      })
      .catch(error => {
        // 处理请求错误
        console.error(error);
      });
    });
  </script>
</body>
</html>
